<template>
    <!--通用组装图-->
    <componentBox :id="id" :ref="id" :option="config.location">
        <my_map :key="key" :ref="'chart'+id" :id="'chart'+id" style="height:100%;width: 100%" :option="option"></my_map>
    </componentBox>
</template>

<script>
    import mixins from "./mixins/index";

    export default {
        name: "screen_chart_map",
        mixins: [mixins],
        components: {
            'componentBox': () => import('@/components/screen/componentBox.vue'),
            'my_map': () => import('@/components/myChart/map.vue'),
        },
        computed: {
            // 图表配置项
            option() {
                const that = this
                // 通过获取传入对象的属性的个数，生成serieArr
                let serieNum = Object.keys(that.data[0]).length - 1
                let serieArr = []
                for (let i = 0; i < serieNum; i++) {
                    serieArr.push({
                        "name": "学生人数",
                        "type": "map",
                        "geoIndex": 0,
                        "itemStyle": {
                            "normal": {"label": {"show": true}},
                            "emphasis": {"label": {"show": true}}
                        }
                    })
                }
                // 返回默认配置项与传入配置合并后的option，生成图表
                return _.merge({
                    "tooltip": {
                        "formatter": function (params) {//提示框浮层内容格式器，支持字符串模板和回调函数两种形式
                            return params.name + '<br />' + params.seriesName + '：' + params.value;
                        }
                    },
                    dataset: {
                        source: that.data
                    },
                    series: serieArr
                }, that.config.option.echartOption);

            }
        },
        mounted() {
            /*  setTimeout(res=>{
                  this.initDom()
              },100)*/
        },
        methods: {
            initDom() {
                // 初始化中国地图
                echarts.registerMap("china", {geoJSON: china});
                // 获取dom节点
                let openingChart = echarts.init(this.$refs.openingChart);
                // option配置写在最下面的
                openingChart.setOption(this.option1);
                window.addEventListener("resize", () => {
                    openingChart.resize();
                });
            }
        }
    }
</script>

<style scoped>
</style>
